<script setup>
import {ref} from "vue";
import {usePreviewAudioStore} from "@/stores/previewAudioStore.js";

const audioRef = ref(null)
const previewAudioStore = usePreviewAudioStore();
let close = null

function open() {
  if(close !== previewAudioStore.absolutePath) {
    audioRef.value.load()
  }
  audioRef.value.play()
}

function onDialogClose() {
  audioRef.value.pause()
  close = previewAudioStore.absolutePath
}
</script>

<template>
  <el-dialog
      v-model="previewAudioStore.show"
      @close="onDialogClose()"
      @open="open()"
      :close-on-press-escape="true"
      :title="previewAudioStore.title"
  >
    <audio ref="audioRef" controls>
      <source :src="previewAudioStore.audio()">
    </audio>
  </el-dialog>
</template>

<style scoped>

</style>